---
id: 61fd67a656743144844941cb
title: Schritt 4
challengeType: 0
dashedName: step-4
---

# --description--

Screenreader kündigen HTML-Elemente auf der Grundlage des Dokumentflusses an. Die Bilanz soll schließlich die Überschrift "Bilanz" und die Unterüberschrift "AcmeWidgetCorp" tragen. Allerdings macht diese Reihenfolge keinen Sinn, wenn sie von einem Screenreader angekündigt wird.

Gib deinem vorhandenen `span` das `class`-Attribut von `flex` und füge zwei `span`-Element in diesem hinzu. Gib dem ersten den Text `AcmeWidgetCorp`. Gib dem zweiten den Text `Balance Sheet`. Du wirst CSS verwenden, um die Reihenfolge des Textes auf der Seite umzukehren, aber die HTML-Reihenfolge macht für einen Screenreader mehr Sinn.

# --hints--

Dein vorhandenes `span`-Element sollte das `class`-Attribut auf `flex` gesetzt haben.

```js
assert(document.querySelector('h1')?.children?.[0]?.classList?.contains('flex'));
```

Dein vorhandenes `span`-Element sollte zwei neue `span`-Elemente enthalten.

```js
assert(document.querySelector('.flex')?.children?.[0]?.localName === 'span');
assert(document.querySelector('.flex')?.children?.[1]?.localName === 'span');
```

Dein neues `span`-Element sollte kein `class`-Attribut haben.

```js
assert(!document.querySelector('.flex')?.children?.[0]?.classList?.length);
assert(!document.querySelector('.flex')?.children?.[1]?.classList?.length);
```

Dein erstes neues `span`-Element sollte den Text `AcmeWidgetCorp` haben.

```js
assert(document.querySelector('.flex')?.children?.[0]?.textContent === 'AcmeWidgetCorp');
```

Dein zweites neues `span`-Element sollte den Text `Balance Sheet` haben.

```js
assert(document.querySelector('.flex')?.children?.[1]?.textContent === 'Balance Sheet');
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Balance Sheet</title>
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
    <main>
      <section>
        <h1>
--fcc-editable-region--
          <span>
          </span>
--fcc-editable-region--
        </h1>
      </section>
    </main>
  </body>
</html>
```

```css

```
